<template>
  <div class="box"></div>
  <Row ref="c-abc">
    <Button type="default" @click="add">操作</Button>
  </Row>
</template>

<script>
import { ref } from 'vue'
import Api from './251107_1.js'
import vtest from './251107_2.vue'
export default {
  components: {
    vtest
  },
  data() {
    return {
      /**
       * @type {Api} 明确 this.api 的类型是 Api
       */
      api: null
    }
  },
  methods: {
    async add() {
      console.log(`helloworld`)
      await this.testAwait()
      console.log(777)
    },
    /**
     * @param {string} a 栏目1
     * @param {string} b 栏目2
     * @param {string} c 栏目3
     */
    testAwait(a, b, c) {
      console.log(a, b, c)
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(999)
          console.log(999)
        }, 2e3)
      })
    }
  },
  mounted() {
    //ctrl + k 键盘监听
    document.addEventListener('keydown', function (event) {
      // 判断是否按下了 Ctrl + K（macOS 下可同时支持 Command + K）
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
        event.preventDefault() // 阻止默认行为（如浏览器搜索等）
        console.log('Ctrl + K 被按下了')
        // 在这里添加你的自定义逻辑
      }
    })

    const f1 = function (name) {
      console.log(name, this)
    }
    f1('f1')

    const obj = {
      a: 1,
      b: 2
    }
    const f2 = f1.bind(obj, 'f2')
    f2()

    const api = new Api()

    this.api = api
    this.api.add()
    api.add()

    /**
     * @type {Api}
     */
    const c = this.$refs['c-abc']
    c.add()
    /**
     * @type {number|string}
     */
    const a = '1'
    /**
     * @type {number[]}
     */
    const arr = [1, 2, 3, 4, 56]
    console.log(a)
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
